<template>
  <div class="home">
    <van-nav-bar
      title="评价"
      class="nav_bar"
      fixed
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    <div class="main">
      <div class="flex">
        <div class="label">总体</div>
        <van-rate v-model="form.rate" />
      </div>
      <div class="content">
        <van-field
          v-model="form.message"
          rows="4"
          autosize
          type="textarea"
          placeholder="写下您的真是体验感受，能帮助更多用户哦..."
        />
        <div class="upload">
          <van-uploader
            v-model="fileList"
            :max-count="9"
            :after-read="afterRead"
            :before-delete="beforeDel"
          />
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="btn" @click="submit">提交评价</div>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  components: {},
  props: {},
  data() {
    return {
      form: {
        rate: 5,
        message: "",
        picList: [],
      },
      fileList: [],
      sn: "",
      itemSn: "",
    };
  },
  watch: {},
  computed: {},
  methods: {
    afterRead(files) {
      let piclist = Array.isArray(files) ? files : [files];
      piclist.forEach(async (item) => {
        item.status = "uploading";
        item.message = "上传中...";
        const data = new FormData();
        data.append("file", item.file);
        let res = await api.upload(data);
        this.form.picList.push(res);
        item.status = "down";
        item.message = "";
      });
    },
    beforeDel(file, detail) {
      this.form.picList.splice(detail.index, 1);
      this.fileList.splice(detail.index, 1);
    },
    onClickLeft() {
      this.$router.back();
    },
    async submit() {
      if (!this.form.message.trim().length) {
        this.$toast("请输入评价");
      }
      let params = {
        items: [
          {
            content: this.form.message,
            grade: this.form.rate,
            openStatus: true,
            orderItemSn: this.itemSn,
            picList: this.form.picList,
          },
        ],
        orderSn: this.sn,
      };
      await api.evaluateOrder(params);
      this.$toast.success("评价成功");
      setTimeout(() => {
        this.$router.back();
      }, 500);
    },
  },
  created() {},
  mounted() {
    this.sn = this.$route.query.sn;
    this.itemSn = this.$route.query.orderItemSn;
  },
};
</script>
<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/4431a33cd62f4efc9fc53a7606eee382.png")
    no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  box-sizing: border-box;
  padding: 200px 50px 220px 50px;
  overflow: hidden;
  .nav_bar {
    /deep/ .van-icon {
      font-size: 50px;
      font-weight: bold;
      color: #333333;
    }
  }

  .main {
    .label {
      font-size: 55px;
      color: #000;
      margin-right: 30px;
    }
    /deep/ .van-rate__icon {
      font-size: 80px;
    }
    /deep/ .van-icon {
      display: block;
    }
    .content {
      padding: 60px 50px;
      background: #fff;
      margin-top: 60px;
      /deep/ .van-cell {
        padding: 0;
      }
      .upload {
        margin-top: 30px;
      }
    }
  }

  .bottom {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    .btn {
      height: 150px;
      padding: 0 200px;
      color: #fff;
      font-size: 50px;
      background: #058efb;
      text-align: center;
      line-height: 150px;
      border-radius: 999px;
    }
  }

  .flex {
    display: flex;
    align-items: center;
  }
}
</style>
